<template>
  <!-- 弹窗中的 销售量统计 -->
  <div class="salesStatistics">
    <div class="el-select_radius date-pick_select">
      <div class="pickTime">
        <el-date-picker
          v-model="dayTime"
          type="date"
          size="small"
          :clearable="false"
          :picker-options="pickerOptions0"
          value-format="yyyy-MM-dd"
          @change="timeChange"
        />
      </div>
      <div class="total-tip">
        <div class="key">
          总销售量
        </div>
        <div class="val">
          {{salesTotal}} 杯
        </div>
      </div>
    </div>
    <div id="salesChart"></div>
  </div>
</template>

<script> 
import {
  format
} from 'silly-datetime'
import { mapState } from 'vuex'
import * as api from '@/api'
import { project_id, limit, ONE_DAY_MS } from '@/consts/consts'
import { chartSales } from '@/consts/chartSales'
import { dayStartTime, dayEndTime } from '@/utils/timeUtil'
import { sortReportData } from '@/utils/deviceData'
let myChart = null
export default {
  data() {
    return {
      dayTime: format(+new Date(), 'YYYY-MM-DD'),
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天的
        }
      },
      chartData: [],
      selectList: [
        {
          label: '全部',
          value: 0,
          disabled: false
        }
      ],
      selectCoffee: [0],
      salesTotal: 0
    }
  },

  computed: {
    ...mapState(['deviceDetail', 'dashtype'])
  },
  methods: {
     // 时间筛选
    timeChange(val) {
      if (val) {
        
      } else {
        this.dayTime = format(new Date())
      }
      this.queryDeviceDay()
    },
    
    draw() {
      myChart = this.$echarts.init(document.getElementById('salesChart'))
      console.log('selCoffee:',this.selectCoffee)
      const [opt, total] = chartSales(
        this.chartData,
        +new Date(this.dayTime),
        +new Date(this.dayTime),
        this.selectCoffee,
        this.selectList,
        this.$echarts
      )
      this.salesTotal = total || 0
      myChart.setOption(opt)
      myChart.resize()
    },

    // 6.13. 查询设备日报表
    async queryDeviceDay() {
      const { code, data } = await api.maxcompute.queryDeviceDay({
        offset: 0,
        limit
      }, {
        dashtype: this.dashtype,
        serial: this.deviceDetail.serial,
        day_start: this.dayTime,
        day_end: this.dayTime,
        store_id: this.$route.query.branch_number
      })
      if (code === 0) {
        this.chartData = sortReportData(data)
        this.draw()
      }
    },



  },
  created () {
    this.queryDeviceDay()
  },
  mounted () {
    
  },
}
</script>

<style lang="stylus" scoped>
.salesStatistics {
   position: relative;
  .date-pick_select {
    position: absolute;
    z-index: 55;
    left:getPx(100)
    flexMiddle(flex-start);
    width:420px;
    .pickTime {
      width: 160px
      .el-date-editor {
        width: 100%;
      }
    }
  }
  .total-tip {
    margin-left: getPx(60);
    width: 240px;
    height: 40px;
    font-size: $base-font-size;
    float: right;
    flexMiddle(flex-start);
    .key {
      color: $secondary-color;
    }
    .val {
      flex: 1;
      margin-left:getPx(15)
    }
  }
}

#salesChart {
  height: getPx(500);
  // width: getPx()
}
@media screen and (max-height:$h){
  #salesChart {
    height: getPx(410);
    // width: getPx()
  }
}
</style>